<template>
    <div class="navBar" v-nav-current="{
                            activeId,
                            className: 'navItem',
                            activeClass: 'navActive'
                        }">
        <div class="navItem"
             v-for="(item, index) of items"
             :key="index"
             @click="changeNav(index)">
            {{ item }}
        </div>
    </div>
</template>


<script>
    import navCurrent from "../directives/navCurrent"
    export default {
        directives: {
            navCurrent
        },
        data() {
            return {
                activeId: 0,
                items: [
                    "选项1",
                    "选项2",
                    "选项3",
                    "选项4",
                ]
            };
        },
        methods: {
            changeNav(index){
                this.activeId = index
            }
        }

    };
</script>

<style scoped>
    .navBar {
        margin: 50px auto;
        border: 1px solid #000;
        width: 500px;
        height: 50px;
    }

    .navItem {
        float: left;
        width: 25%;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

    .navActive {
        background: #000;
        color: #fff;
    }
</style>
